The Magnifying-Glass Icon in Search Design: Pros and Cons 放大鏡圖示
大多數使用者能夠識別放大鏡圖示表示搜尋功能，即使沒有標籤。然而，僅顯示圖示會使搜尋變得不易發現。在移動端，放大鏡圖示有助於節省空間，但在桌面端，僅用圖示可能會增加使用者找到搜尋功能的難度。
關於搜尋框的既有指南 (Previous Guidelines About the Search Box)
長久以來，搜尋框設計遵循以下指南：
- 在頁面右上角提供一個易識別的搜尋框，包括一個文字輸入框和一個“搜尋”按鈕。
- 搜尋框本身無需額外標籤，按鈕的“搜尋”文字即可向使用者傳達功能及操作方式。
儘管放大鏡圖示在節省空間方面具有優勢，但需要注意是否符合使用者需求。使用者關心的是能夠快速找到並使用搜尋功能，而不是搜尋區域的外觀。如果設計改變後仍然能滿足這一目標，問題不大。但研究表明，僅用圖示會帶來一些顯著劣勢。
放大鏡圖示的採用 (Adoption of an Icon)
放大鏡圖示因其在多個網站、應用和作業系統中的一致使用而被廣泛認知和接受。隨著響應式設計的興起，這一圖示在移動端尤為常見，但在桌面端的使用需要更為審慎。
示例：放大鏡圖示在 Google Chrome、Windows Explorer、Internet Explorer 和 Microsoft Word for Mac 中都被用作搜尋標識。
最近研究的發現 (Findings from Our Recent Research)
1 放大鏡圖示單獨使用時更難被發現
在沒有文字輸入框的情況下，放大鏡圖示佔用空間較小，因此不夠顯眼，使用者更難找到它。
桌面端建議：避免僅用圖示，而應搭配可見的文字框。
2 使用者能夠識別放大鏡圖示的含義
多數使用者能夠理解放大鏡圖示代表搜尋功能。但需確保點選圖示能提交搜尋請求，併為無障礙性新增 ALT 文字。
3 非預期位置的搜尋難以發現
使用者習慣於在右上角尋找搜尋框。若放置在其他位置，需透過設計顯著增強其可見性。
4 圖示僅設計增加互動成本
僅用圖示需要使用者額外點選才能顯示文字框，增加了搜尋流程的步驟，而直接提供可用的文字框會更快捷。
5 大多數其他圖示仍需要標籤
如三線選單和地圖示記圖示，這些新圖示的意義尚未完全被使用者熟悉，因此建議在桌面端搭配標籤使用。
使用放大鏡圖示的設計建議 (Recommendations for Designing with the Magnifying-Glass Icon)
桌面端的建議
- 保留旁邊的文字輸入框
在桌面版網站上，放大鏡圖示旁應保留一個可用的文字輸入框。這一做法同樣適用於平板裝置。在小螢幕裝置（如智慧手機或智慧手錶）上，可以隱藏文字框，僅在使用者點選放大鏡圖示時顯示。
- 使用簡潔的放大鏡圖示
選擇圖形細節較少的圖示版本，這樣的圖示更容易被識別。
- 增大圖示尺寸並增加填充
使用較大的圖示並增加其周圍的間距，從而提高其點選區域的可見性和易用性。
- 確保圖示與背景形成足夠對比
放大鏡圖示應與背景和周圍元素有顯著區別，以便快速被使用者注意到。
- 將搜尋工具放置在右上角
使用者依然習慣於在右上角尋找搜尋功能，因此將搜尋圖示或文字框放置於此。
- 支援透過回車鍵和點選圖示提交搜尋
很多使用者仍習慣點選按鈕來提交搜尋，因此放大鏡圖示必須支援這一操作。此外，還需確保按下回車鍵時也能提交搜尋請求。
- 考慮使用擴充套件式搜尋框
搜尋框可設計為在點選時展開，既節省空間，又能提供足夠的視覺提示以幫助使用者快速找到並執行搜尋。如果使用固定大小的搜尋框，建議文字輸入區域寬度至少為27個字元，以便使用者輕鬆檢視和修改輸入內容。
若僅使用圖示時的建議
- 避免圖示周圍堆積過多其他圖示
不要讓放大鏡圖示被其他圖示淹沒，需確保其優先順序，給予使用者足夠的視覺提示。
- 不要將搜尋圖示孤立放置
搜尋圖示若被孤立，會同樣難以被發現。將其與相關功能元素適當分組。
- 將文字框顯示在圖示附近
使用者點選圖示後，文字框應出現在圖示附近。若文字框距離圖示較遠，使用者需額外查詢，增加互動成本，這也違反了格式塔接近性法則。
- 單擊即可開始輸入
避免使用者需要點選兩次才能啟用搜尋框。例如，一些設計要求使用者先點選圖示開啟搜尋框，然後再點選文字框聚焦輸入，這是不必要的。更好的設計是讓文字框在點選圖示後立即啟用遊標，甚至可以在懸停時展開文字框。
移動端和小螢幕裝置的擴充套件建議
- 在移動端節省空間
在移動裝置上，文字框可以隱藏，僅在使用者點選放大鏡圖示時顯示，同時確保點選圖示後文字框自動啟用遊標。
- 最佳化文字框展開體驗
使用漸進動畫或平滑展開方式，使使用者體驗更自然，並確保文字框的展開不遮擋關鍵內容或幹擾頁面佈局。
